<template>
  <div>
    <div class="padding bg-white">
      <el-checkbox-group v-model="checked">
        <el-checkbox v-for="item in checkbox" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="dark-table-wrapper">
      <el-table
        v-loading="loading" :data="lists" lazy :load="loadMore"
        row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white'
          }"
      >
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'area'" #default="{ row }">
            <el-link v-if="!row.hasChildren" :underline="false" type="primary" style="font-size: 12px;" @click="navigateToEnterpriseAnalysis(row, 'RealTimeDataIndex')">{{row.area}}</el-link>
            <span v-else>{{row.area}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  WATER, GAS, ELECTRIC, COMPREHENSIVE_CONSUMPTION, COAL, OTHER,
  ELECTRIC_ZH, GAS_ZH, WATER_ZH, COMPREHENSIVE_CONSUMPTION_ZH, COAL_ZH, OTHER_ZH
} from '@/config'
import { getEnergyUnitName } from '@/utils'
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'regional-table',
  mixins: [Navigate2enterpriseAnalysis],
  props: {
    loading: Boolean,
    lists: Array,
  },
  data () {
    return {
      checked: [ELECTRIC],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    energyVariety () {
      return this.$store.state.energyVariety
    },
    checkbox () {
      return this.energyVariety
    },
    columns () {
      const checked = this.checked
      const electricConfig = [
        { label: `${ELECTRIC_ZH}（${getEnergyUnitName(ELECTRIC)}）`, prop: ELECTRIC },
        { label: '同比（%）', prop: ELECTRIC + 'Growth' },
        { label: '环比（%）', prop: ELECTRIC + 'Ratio' },
      ]
      const waterConfig = [
        { label: `${WATER_ZH}（${getEnergyUnitName(WATER)}）`, prop: WATER },
        { label: '同比（%）', prop: WATER + 'Growth' },
        { label: '环比（%）', prop: WATER + 'Ratio' },
      ]
      const gasConfig = [
        { label: `${GAS_ZH}（${getEnergyUnitName(GAS)}）`, prop: GAS },
        { label: '同比（%）', prop: GAS + 'Growth' },
        { label: '环比（%）', prop: GAS + 'Ratio' },
      ]
      const coalConfig = [
        { label: `${COAL_ZH}（${getEnergyUnitName(COAL)}）`, prop: COAL },
        { label: '同比（%）', prop: COAL + 'Growth' },
        { label: '环比（%）', prop: COAL + 'Ratio' },
      ]
      const heatConfig = [
        { label: '热力（吉焦）', prop: 'hot' },
        { label: '同比（%）', prop: 'hotGrowth' },
      ]
      const oilsConfig = [
        { label: '油品（吉焦）', prop: 'oils' },
        { label: '同比（%）', prop: 'oilsGrowth' },
      ]
      const cokeConfig = [
        { label: '焦炭（吉焦）', prop: 'coke' },
        { label: '同比（%）', prop: 'cokeGrowth' },
      ]
      const otherConfig = [
        { label: `${OTHER_ZH}（${getEnergyUnitName(OTHER)}）`, prop: OTHER },
        { label: '同比（%）', prop: OTHER + 'Growth' },
        { label: '环比（%）', prop: OTHER + 'Ratio' },
      ]
      const columns = [
        { label: '行业', prop: 'area', width: 260 },
        { label: `${COMPREHENSIVE_CONSUMPTION_ZH}（${getEnergyUnitName(COMPREHENSIVE_CONSUMPTION)}）`, prop: COMPREHENSIVE_CONSUMPTION, width: 200 },
        { label: '同比（%）', prop: COMPREHENSIVE_CONSUMPTION + 'Growth' },
        { label: '环比（%）', prop: COMPREHENSIVE_CONSUMPTION + 'Ratio' },
      ]
      const configs = {
        [ELECTRIC]: electricConfig,
        [WATER]: waterConfig,
        [GAS]: gasConfig,
        // TODO
        [COAL]: coalConfig,
        heat: heatConfig,
        coke: cokeConfig,
        oils: oilsConfig,
        [OTHER]: otherConfig,
      }
      const keys = Object.keys(configs).filter(key => checked.includes(key))
      return keys.reduce((acc, key) => {
        acc = acc.concat(configs[key])
        return acc
      }, columns)
    },
  },
  mounted () {
  },
  methods: {
    loadMore (tree, treeNode, resolve) {
      this.$emit('loadMore', tree, treeNode, resolve)
    },
  }
}
</script>
